<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单详情列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="40">
        <el-col :span="8">
          <el-input v-model="searchText" placeholder="请输入订单ID">

            <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="goBack">重置</el-button>
        </el-col>
      </el-row>


      <!-- 订单列表数据 -->
      <el-table :data="orderList" border stripe>
        <el-table-column label="编号" prop="id" width="100" align="center"></el-table-column>
        <el-table-column label="订单ID" prop="orderId" width="100" align="center"></el-table-column>
        <el-table-column label="菜品ID" prop="dishId" width="100" align="center"></el-table-column>
        <el-table-column label="菜品名称" prop="dishName" width="140" align="center"></el-table-column>
        <el-table-column label="菜系" prop="dishCuisine" width="140" align="center"></el-table-column>
        <el-table-column label="菜品价格" prop="dishPrice" width="140" align="center"></el-table-column>
        <el-table-column label="菜品数量" prop="dishNum" width="140" align="center"></el-table-column>
        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


      <!-- 分页区域 -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryInfo.pageSize"
          :total="totalItems"
          layout="total, sizes, prev, pager, next, jumper"
          background
      >
      </el-pagination>


    </el-card>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "OrderDetailsList.vue",

  data() {
    return {
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 10
      },
      totalItems: 0 ,// 总记录数,
      orderList: [],
      searchText: ''

    }
  },
  methods: {
    handleDelete(row) {
      // 弹出确认对话框
      this.$confirm('确认删除此数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = 'http://localhost:10021/orders/deletes?id='+row.id;
        console.log("即将传入的id为:"+row.id)
        this.axios.get(url).then((response) =>{
          let jsonResult = response.data;
          if (jsonResult.state == 20000){
            this.$message({
              message:'删除成功!',
              type:'success'
            });
            this.getOrderList();
          }else {
            this.$message({
              message:'删除失败!',
              type:'error'
            })
          }
        }).catch(error => {
          // 发生错误时的提示信息
          this.$message.error('删除失败,请重试!');
          console.error(error);
        })
      })
    },
    goBack() {
      this.getOrderList();
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.getOrderList()

    },
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage
      this.getOrderList()

    },
    getOrderList() {
      let a = this.queryInfo.pageNum
      let b = this.queryInfo.pageSize
      axios.get('http://localhost:10021'+'/orders/orderDetails?pageNum=' + a + '&pageSize=' + b)
          .then(response => {
            this.orderList = response.data.data.list; // 将返回的数据赋值给orders属性
            this.totalItems = response.data.data.total;
          })
          .catch(error => {
            console.error(error);
          });
    },
    search() {
      // 获取搜索框的值
      let searchText = this.searchText;

      // 发送异步请求，获取搜索结果
      // 这里以使用axios库发送GET请求为例
      axios.get('http://localhost:10021/orders/orderId', {
        params: {
          orderId: searchText
        }
      }).then(response => {
        // 处理搜索结果
        // 在这里对搜索结果进行处理，比如更新组件的数据
        this.orderList =  response.data.data;
      })
          .catch(error => {
            // 处理请求错误
            console.error(error);
          });
    },
    queryData() {
      // 根据新的pageNum和pageSize进行数据查询
      // 更新totalItems值
      // 更新dataList数据
    }

  },
  mounted() {
    this.getOrderList();
    this.queryData();
  },

}
</script>

<style scoped>

</style>
